//左侧导航栏组件
import React, { useState, useEffect } from 'react';
import { Link, useRouter } from 'next/router';
import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;

const items = [
    {
      key: '1',
      icon: <PieChartOutlined />,
      label: '网站主页',
    },
    {
      key: '2',
      icon: <DesktopOutlined />,
      label: '交易策略',
    },
    {
      key: '3',
      icon: <ContainerOutlined />,
      label: '股票行情',
    },
    { 
      key: '4',
      label: 'Navigation One',
      icon: <MailOutlined />,
      label: '股票交易',
    },
    {
      key: 'sub',
      label: '个人中心',
      icon: <AppstoreOutlined />,
      children: [
        {
          key: '5',
          label: '我的资产',
        },
        {
          key: '6',
          label: '充值提现',
        },
      ],
    },
  ];

const Navbar= () => {
  const [collapsed, setCollapsed] = useState(false); 
  // const {
  //   token: { colorBgContainer, borderRadiusLG },
  // } = theme.useToken();
  const router = useRouter();

  const [selectedKeys, setSelectedKeys] = useState(['1']);
  useEffect(() => {
    const pathKeyMapping = {
      '/main': '1',
      '/strategy': '2',
      '/stockMarket': '3',
      '/transaction': '4',
      '/assets': '5',
      '/money': '6',
    };
    const currentKey = pathKeyMapping[router.pathname] || '1';
    setSelectedKeys([currentKey]);
  }, [router.pathname]);

  const handleMenuClick = ({ key }) => {
    // 根据点击的菜单项进行页面跳转
    const pathMap = {
      '1': '/main',
      '2': '/strategy',
      '3': '/stockMarket',
      '4': '/transaction',
      '5': '/assets',
      '6': '/money',
    };
    router.push(pathMap[key]);
  };

  return (
    <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed} >
            <div className="demo-logo-vertical" />
            <Menu
                theme="dark"
                mode="inline"
                selectedKeys={selectedKeys}
                items={items.map((item) => ({
                    ...item,
                    onClick: handleMenuClick,
                }))}
            />
        </Sider>
        {/*<Layout>
            <Header
                style={{
                    padding: 0,
                    background: theme.useToken().colorBgContainer,
                }}
            >
                {/* <Button
                    type="text"
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    onClick={() => setCollapsed(!collapsed)}
                    style={{
                        fontSize: '16px',
                        width: 64,
                        height: 64,
                    }}
                /> */}
               {/* <Button
                    type="text" // 保持文本按钮类型
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    onClick={() => setCollapsed(!collapsed)}
                    style={{
                        color: 'white', // 明确设置文字颜色为白色
                        fontSize: '16px',
                        width: 64,
                        height: 64,
                        border: 'none', // 确保没有边框
                        background: 'none' // 确保背景透明
                    }}
                />
               

           </Layout> </Header>
            */}
            
       
    </Layout>
  );

};
export default Navbar;





    // switch (key) {
    //   case '1':
    //     router.push('/main'); // 网站主页
    //     break;
    //   case '2':
    //     router.push('/news'); // 新闻速递
    //     break;
    //   case '3':
    //     router.push('/stockMarket'); // 股票行情
    //     break;
    //   case '4':
    //     router.push('/simulation'); //交易模块
    //     break;
    //   case '5':
    //       router.push('/assets'); //查看我的资产
    //       break;
    //   case '6':
    //       router.push('/money'); //充值提现
    //       break;
    //   default:
    //     break;
    // }

// return (
//   <Layout>
//     <Sider trigger={null} collapsible collapsed={collapsed} >
//       <div className="demo-logo-vertical" />
//       <Menu
//         theme="dark"
//         mode="inline"
//         defaultSelectedKeys={['1']}
//         items={items.map((item) => ({
//           ...item,
//           onClick: handleMenuClick, // 将点击事件处理函数绑定到每个菜单项
//         }))}
//       />
//     </Sider>
//   </Layout>
// );